import React, { useEffect } from 'react';
import { Form, Input, Modal, Select } from 'antd';
import { adminPriceType } from '@/utils/constant';
import { isNumber } from '@/utils/utils';
import moment from 'moment';

const FormItem = Form.Item;
const Detail = (props: any) => {
  const {
    visible,
    onCancel,
    onOk,
    getForm,
    loading,
    afterClose,
    editId,
  } = props;
  const [form] = Form.useForm();
  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 4 },
      md: { span: 4 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 18 },
      md: { span: 18 },
    },
  };
  useEffect(() => {
    getForm(form);
  }, []);

  const onValuesChange = (changedValues: any, allValues: any) => {
    if (changedValues.productName) {
      switch (changedValues.productName) {
        case 'PS':
          form.setFieldsValue({
            material: '聚苯乙烯',
          });
          break;
        case 'PP':
          form.setFieldsValue({
            material: '聚丙烯',
          });
          break;
        case 'PE':
          form.setFieldsValue({
            material: '聚乙烯',
          });
          break;
        case 'PET':
          form.setFieldsValue({
            material: '聚对苯二甲酸乙二醇酯',
          });
          break;
        case 'PVC':
          form.setFieldsValue({
            material: '聚氯乙烯',
          });
          break;
        default:
          return '';
      }
    }
  };

  return (
    <Modal
      afterClose={afterClose}
      destroyOnClose={true}
      confirmLoading={loading}
      title={editId !== undefined ? '编辑' : '新增'}
      visible={visible}
      onCancel={onCancel}
      onOk={onOk}
    >
      <Form
        hideRequiredMark
        style={{ marginTop: 8 }}
        form={form}
        initialValues={{
          unit: 'KG',
        }}
        name="basic"
        onValuesChange={onValuesChange}
      >
        <FormItem
          {...formItemLayout}
          label={'品名'}
          name="productName"
          rules={[{ required: true, message: '请输入品名' }]}
        >
          <Input />
        </FormItem>
        <FormItem
          {...formItemLayout}
          label={'颜色'}
          rules={[{ required: true, message: '请输入颜色' }]}
          name="color"
        >
          <Input />
        </FormItem>
        <FormItem
          {...formItemLayout}
          label={'等级'}
          rules={[{ required: true, message: '请输入等级' }]}
          name="grade"
        >
          <Select>
            <Select.Option value={'全新料'}>全新料</Select.Option>
            <Select.Option value={'仿新料'}>仿新料</Select.Option>
            <Select.Option value={'再生料'}>再生料</Select.Option>
          </Select>
        </FormItem>
        <FormItem
          {...formItemLayout}
          label={'属性'}
          name="attribute"
          rules={[{ required: false, message: '请输入属性' }]}
        >
          <Input />
        </FormItem>
        <FormItem
          {...formItemLayout}
          label={'材料'}
          name="material"
          rules={[{ required: true, message: '请输入材料' }]}
        >
          <Input disabled={true} />
        </FormItem>
        <FormItem
          {...formItemLayout}
          label={'单位'}
          name="unit"
          rules={[{ required: true, message: '请输入单位' }]}
        >
          <Input disabled={true} />
        </FormItem>
      </Form>
    </Modal>
  );
};
export default Detail;
